<template>
    
    <div class="conTainer">

        <div class="headers">
            <!-- 搜索头部 -->
              <div class="search_container">
                <div class="leftjt">
                  <router-link to="/Search">
                    <img class="zjts" :src="picture.zjt" alt="" />
                  </router-link>
                </div>
                <div class="search">
                  <form action="" onsubmit="return false" @keyup.enter="gosearch">
                    <input v-model="input" type="text" placeholder="请输入搜索内容">
                  </form>
                  <img :src="picture.serach"  @click="gosearch">
                      <img :src="picture.jd" alt="jd">
                </div>
              </div>

              <!-- 排序 -->
              <ul>
                <li v-for="(item ,index) in sequence.msg" :key="index" @click="changed(index)">
                  <div :class='sequence.currentIndex == index ? "active" : ""'>{{item.name}}</div>
                  <div class="fliter" v-if="index != 0">
                    <i 
                    :class=' item.status == 1 ? "active" : "" '
                     class="iconfont icon-arrow_up_fat">
                    </i>
                    <i 
                    :class=' item.status == 2 ? "active" : "" '
                     class="iconfont icon-arrow_down_fat">
                    </i>
                </div>
                </li>
              </ul>

        </div>
        <div class="listContainer" v-if="goods.length">
          <div class="listContent" v-for="item in goods" :key="item.id" @click="godetalis(item.id)">
                <div>
                  <img class="pics" :src="pic+item.picture" alt="">
                </div>
                <div>
                  <span class="skyCat">{{item.skyCat}}</span>
                  <span>{{item.name}}</span>
                  <div>
                    <span>￥{{item.price}}元</span>
                    <span>{{item.pay}}</span>
                  </div>
                  <div>{{item.comment}}</div>
                </div>
          </div>
        </div>
        <h1 v-else>
          <img class="zwsj" :src="imgUrl" alt="">
        </h1>
    </div>
    
</template>

<script>
import axios from 'axios';

export default {
    name: 'SearchList',

    data() {
        return {
            picture:{
                jd:require('@/assets/images/京东.png'),
                serach:require('@/assets/images/搜索.png'),
                zjt: require("@/assets/images/左箭头.png"),
            }, 
            pic:'http://localhost:3000/',
            goods:[],
            input:'',
            imgUrl:'./images/zwsj.png',
            sequence:{
              currentIndex:0,
              msg:[
                /*
                status:0 都不执行
                status:1 执行上箭头
                status:2 执行下箭头
                */
               {name:'综合',key:'zonghe'},
               {name:'价格',status:0,key:'price'},
               {name:'销量',status:0,key:'num'},
              ]
            }
        };
    },
    // 升序降序
    computed:{
      orderBy(){
        // 知道当前是哪个对象
        let obj = this.sequence.msg[this.sequence.currentIndex];
        console.log(obj);
        // asc代表升序，desc代表降序
        let val = obj.status == 1 ? 'asc' : 'desc';
        console.log(val);
        return{
          [obj.key]:val,
          // {price:asc  or   desc}
        }
      }
    },
    // 把输入搜索的值传入到list页面
    created(){
    if (this.$route.query.key||'') {
      this.input=this.$route.query.key
    }
      console.log(this.$route.query);
    },

    methods:{
      godetalis(id){
        this.$router.push({
      path:'/detail',
      // 显式路由传参query，
      query:{
        id
      }
     })
      },
      // 点击搜索
      gosearch(){
      // 如果value不发生变化就不跳转页面
      if (this.input===this.$route.query.key) {
        return
      }
    },
     // 点击升序降序
      changed(index){
          console.log(index);
          // 动态的把index变成跟点击的currentIndex相等
          this.sequence.currentIndex = index
          // 点击的内容下标，对应哪一个数据
        let data =  this.sequence.msg[index]
        console.log(data);
        // 取消所有的状态值，让status都变成0
        this.sequence.msg.forEach((item,i) => {
            if (i != index) {
              item.status=0
            }
        });
        // 点击改变当前状态
        if (index == this.sequence.currentIndex) {
          data.status = data.status == 1 ? 2 : 1;
        }
        // 再次发送请求进行排序
        let ajax = (type,url) => {
                    return new Promise((resolve, reject) => {
                axios({
                    method:type,
                    url:url,
                    // 前端给后台传数据
                    params:{
                      searchName:this.$route.query.key,
                      // es6
                      ...this.orderBy,
                    }
                    
                })
                  .then((result) => {
                  resolve(result)
                  console.log(result);
                }).catch((err) => {
                  reject(err)
                });
                });
                }
                    let good = async () => {
                    let res = await ajax('GET','http://localhost:3000/api/goods')
                    console.log(res.data);
                    this.goods = res.data
                } 
                good()
      },
      
    },
    // 获取商品数据
    mounted() {
                let ajax = (type,url) => {
                    return new Promise((resolve, reject) => {
                axios({
                    method:type,
                    url:url,
                    // 前端给后台传数据
                    params:{
                      searchName:this.$route.query.key,
                      // es6
                      ...this.orderBy,
                    }
                    
                })
                  .then((result) => {
                  resolve(result)
                  console.log(result);
                }).catch((err) => {
                  reject(err)
                });
                });
                }
                    let good = async () => {
                    let res = await ajax('GET','http://localhost:3000/api/goods')
                    console.log(res.data);
                    this.goods = res.data
                } 
                good()
              
          },  

          watch:{
            $route(){
              let ajax = (type,url) => {
                    return new Promise((resolve, reject) => {
                axios({
                    method:type,
                    url:url,
                    // 前端给后台传数据
                    params:{
                      searchName:this.$route.query.key,
                      // es6
                      ...this.orderBy,
                    }
                    
                })
                  .then((result) => {
                  resolve(result)
                  console.log(result);
                }).catch((err) => {
                  reject(err)
                });
                });
                }
                    let good = async () => {
                    let res = await ajax('GET','http://localhost:3000/api/goods')
                    console.log(res.data);
                    this.goods = res.data
                } 
                good()
            },
          }

        
         
    
};

</script>

<style scoped>
@import url("@/assets/css/icon/iconfont.css");
.conTainer{
    width: 400px;
    margin: 0 auto;
    height: 1880px;
  }
.search_container{
    display: flex;
    height: 44px;
    background: linear-gradient(white, rgb(241, 241, 241));
    border-bottom: 2px solid #e0e0e0;
  }
  
  .search{
    display: flex;
    width: 359px;
  }
  .search img{
    width: 25px;
    height: 25px;
    margin-top: 10px;
    cursor: pointer;
  }
  .search input{
    width: 280px;
    margin-top: 10px;
    border: 1px solid rgb(216, 216, 216);
    outline: none;
    height: 25px;
    margin-left: 15px;
    border-radius: 18px;
  }

  .zjts{
    width: 30px;
    height: 30px;
    margin-top: 9.5px;
    margin-left: 10px;
  }
  .headers ul{
    display: flex;
    padding: 20px 0;
    justify-content: space-around;
    font-size: 16px;
  }
  .headers ul li{
    display: flex;
    align-items: center;
  }
  .headers ul li .fliter{
    display: flex;
    flex-direction: column;
  }
  .headers ul li>div{
    padding: 0 3px;
  }
  .listContainer{
    width: 400px;
    margin:auto;
    background: red;
  }
  .listContent{
    float: left;
    width: 200px;
    cursor: pointer;
  }
  .pics{
    width: 200px;
    height: 260px;
  }
  .skyCat{
    display: inline-block;
    background: red;
    color: #fff;
    width: 50px;
    text-align: center;
    border-radius: 10px;
    font-size: 14px;
  } 
  .active{
    color: red;
  }
  .zwsj{
    width: 400px;
  }
  h1{
    margin: 0;
  }
</style>